/**
 * 课程卡片组件
 */

'use client';

import React from 'react';
import { motion } from 'framer-motion';
import { ProcessedCourse } from '../../types/course';
import { getTextColor } from '../../utils/colorUtils';
import { getCourseDisplayText } from '../../utils/scheduleUtils';
import { clsx } from 'clsx';

export interface CourseCardProps {
  /** 课程信息 */
  course: ProcessedCourse;
  /** 点击事件 */
  onClick: (course: ProcessedCourse) => void;
  /** 动画延迟时间 (ms) */
  animationDelay: number;
  /** 自定义类名 */
  className?: string;
}

export const CourseCard: React.FC<CourseCardProps> = ({
  course,
  onClick,
  animationDelay,
  className
}) => {
  const displayText = getCourseDisplayText(course);
  const textColor = getTextColor(course.color);
  
  // 计算课程跨度的节数
  const sectionSpan = course.section.end - course.section.start + 1;
  
  // 根据跨度调整字体大小和内边距
  const isLongCourse = sectionSpan >= 4; // 4节课及以上
  const isMediumCourse = sectionSpan === 2;
  
  return (
    <motion.div
      className={clsx(
        'h-full w-full rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow',
        className
      )}
      style={{
        backgroundColor: course.color,
        color: textColor,
      }}
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6, delay: animationDelay / 1000, ease: 'easeOut' }}
      whileHover={{ scale: 1.02, zIndex: 10 }}
      whileTap={{ scale: 0.98 }}
      onClick={() => onClick(course)}
    >
      <div
        className={clsx(
          'course-card relative cursor-pointer h-full w-full',
          'flex flex-col justify-center items-center text-center',
          isLongCourse ? 'p-4 gap-2' : isMediumCourse ? 'p-3 gap-1' : 'p-2 gap-1'
        )}
      >
        {/* 课程名称 */}
        <div 
          className={clsx(
            'course-name font-semibold leading-tight',
            isLongCourse ? 'text-sm sm:text-base' : 'text-xs sm:text-sm',
            'line-clamp-2'
          )}
          title={displayText.name}
        >
          {displayText.name}
        </div>
        
        {/* 地点信息 */}
        <div 
          className={clsx(
            'course-location opacity-90',
            isLongCourse ? 'text-xs sm:text-sm' : 'text-[10px] sm:text-xs',
            'line-clamp-1'
          )}
          title={displayText.location}
        >
          {displayText.location}
        </div>
        
        {/* 长课程显示额外信息 */}
        {isLongCourse && (
          <div className="course-time text-xs opacity-75 mt-1">
            第{course.section.start}-{course.section.end}节
          </div>
        )}
      </div>
    </motion.div>
  );
};
